<template>
  <div class="app-container">
    <el-row style="padding: 20px">
      <el-col :span="12" style="margin: 20 15">
        <div class="grid-content bg-purple">
          <el-button type="success" @click="addDataBtn">新增</el-button>
          <el-button type="warning" @click="moreDel">高级搜索</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-input
            v-model="iptSearch"
            placeholder="请输入内容"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="onSearch"
            ></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>

    <el-table
      style="width: 100%; margin: 30px auto; margin-left: 15px"
      @selection-change="handleSelectionChange"
      @sort-change="onSortChange"
      height="400"
      :data="list"
    >
      <el-table-column
        fixed
        type="index"
        label="#"
        width="50"
      ></el-table-column>
      <el-table-column
        fixed
        prop="title"
        label="题目"
        width="500"
      ></el-table-column>
      <el-table-column prop="cid" label="分类" width="200"></el-table-column>
      <el-table-column prop="uid" label="作者" width="100"></el-table-column>

      <el-table-column
        prop="created"
        label="发布时间"
        sortable
        width="150"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="info" size="small">详情</el-button>
          <el-button type="warning" size="small" @click="upDataClk(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="delDataClk(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉 -->
    <div style="padding: 50px 20px 20px 20px">
      <el-drawer
        :title="title"
        :visible.sync="drawer"
        :before-close="handleClose"
        :with-header="true"
        size="50%"
      >
        <el-form
          :model="form"
          size="mini"
          style="padding: 0 5%"
          ref="form"
          label-width="100px"
          class="demo-form"
        >
          <el-form-item label="标题" prop="desc">
            <el-input type="textarea" v-model="form.title" rows="1"></el-input>
          </el-form-item>
          <el-form-item label="类别" prop="resource">
            <el-select v-model="form.cid" placeholder="请选择类别">
              <el-option
                v-for="(v, i) in tableData"
                :key="i"
                :label="v.name"
                :value="v.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选项">
            <el-checkbox-group v-model="form.answers">
              <div
                v-for="(item, index) in form.options"
                :key="index"
                class="checkbox-row"
              >
                <el-checkbox :label="getLetterByIndex(index)"></el-checkbox>
                <!-- <el-checkbox :label="item.text"></el-checkbox> -->
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="item.value"
                  autosize
                ></el-input>
                <!--  -->
                <template>
                  <el-button
                    v-if="index == form.options.length - 1"
                    @click="doAddOption(index)"
                    type="primary"
                    icon="el-icon-plus"
                    circle
                  ></el-button>
                  <el-button
                    @click="doRemoveOption(index)"
                    v-if="index > 3"
                    type="danger"
                    icon="el-icon-minus"
                    circle
                  ></el-button>
                </template>
                <!--  -->
              </div>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="答案" prop="desc">
            {{ doSort(form.answers).join(",") }}
          </el-form-item>

          <el-form-item label="答案提示" prop="desc">
            <el-input type="textarea" rows="1" v-model="form.tips"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmitClk(form)">{{
              btnText
            }}</el-button>
            <el-button @click="cancelClk">取消</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>

    <!-- 分页 -->
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>-->
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  layout: "main",
  data() {
    return {
      drawer: false,
      form: {
        answers: [],
        options: [
          {
            value: "",
          },
          {
            value: "",
          },
          {
            value: "",
          },
          {
            value: "",
          },
          {
            value: "",
          },
        ],
        uid: 1,
      },
      title: "新增",
      btnText: "新增保存",
      iptSearch: "",
    };
  },
  created() {
    this.getQuestion(), this.getClassify();
  },

  methods: {
    doSort(arr) {
      return [...arr].sort();
    },
    ...mapActions("test", [
      "getQuestion",
      "addQuestion",
      "deleteQuestion",
      "updataQuestion",
    ]),
    ...mapActions("classify", ["getClassify"]),
    // 通过索引写字母
    getLetterByIndex(index) {
      return String.fromCharCode("A".charCodeAt(0) + index);
    },
    onSearch() {},
    // 点击提交
    async onsubmitClk() {
      await this.addQuestion(this.form);
      // console.log(th)
      this.$message({
        type: "success",
        message: "题目保存成功！",
      });
      // if (this.form.id) {
      //   this.updataQuestion(this.form);
      // } else {
      //   this.addQuestion(this.form);
      // }

      this.drawer = false;
      console.log(this.form);
    },

    doAddOption(index) {
      this.form.options.push({
        // text: this.getLetterByIndex(index + 1),
        value: "",
      });
    },
    doRemoveOption(index) {
      this.form.options.splice(index, 1);
    },

    //取消点击
    cancelClk() {
      this.drawer = false;
    },
    // 删除
    delDataClk(row) {
      // console.log(row);
      this.$confirm("确定要删除该题目吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteQuestion(row.id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
    moreDel() {},
    upDataClk(row) {
      // console.log(JSON.parse(row.options));
      this.form = {
        ...row,
        options: JSON.parse(row.options),
        answers: JSON.parse(row.answers),
       
      };
      this.drawer = true;
    },
    addDataBtn() {
      this.drawer = true;
    },
    handleSelectionChange(cid) {},
    //排序
    onSortChange(value) {},
    //抽屉关闭
    handleClose(done) {},
    // 每页几条
    async handleSizeChange(val) {},
    //当前页
    async handleCurrentChange(val) {},
    onChange(val) {},
  },
  computed: {
    ...mapState("test", ["list"]),
    ...mapState("classify", ["tableData"]),
  },
  components: {},
};
</script>

<style scoped>
.checkbox-row {
  display: flex;
}

.checkbox-row .el-textarea {
  margin-left: 10px;
  width: 70%;
}

.btn-bottom {
  margin-left: 80px;
}
.textarea {
  margin-left: 12px;
}

.box {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}
</style>